<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	<title>  Notebook  - intlsy-neko </title>
	<link rel="stylesheet" type="text/css" href="src/Semantic-UI/semantic.min.css" />
	<script src="src/jquery/jquery.js"> </script>
	<script src="src/jquery/jquery.form.min.js"> </script>
	<script src="src/Semantic-UI/semantic.min.js"></script>
	<script src="src/art-template/template-web.js"></script>

	<script src="src/core.js"> </script>
	<script> InitCore() </script>
	
<script src="src/notebook.js"> </script>

	<style>
	.ui.header > .icon{
		font-size: 1em !important;
	}
	div.word_button_sidebyside{
		display: flex;
		justify-content: space-between;

	}
	</style>
</head>
<body style="position: relative; margin-top: 30px; height: calc(100% - 30px); overflow-y: overlay; background-color: #f6f6f6">
	<div id="root">
		<div class="ui top borderless menu fixed">
			<div class="ui container">
				<a class="item" href="/" style="font-weight: 700; font-size: 16px; padding-top: 0px; padding-bottom: 0px;"> intlsy neko </a>
				<a class="item" href="/"><i aria-hidden="true" class="home active icon"></i>首页</a>
				<a class="item" href="/notebook.html"><i aria-hidden="true" class="pencil icon"></i>Notebook</a>
				<a class="item" href="/novel.html"><i aria-hidden="true" class="book icon"></i>英文小说</a>
				<a class="item" href="/settings.html"><i aria-hidden="true" class="cogs icon"></i>选项</a>
				<!-- <a class="item" href="/errbook.html"><i aria-hidden="true" class="book icon"></i>错题本</a> -->
			</div>
		</div>
		<div class="ui doubling stackable grid container">
			
<div class="ui stackable centered column">
	<div class="">
		<button id="add-new-note-button" class="ui teal labeled icon button"><i class="plus icon"></i> 添加条目 </button>
		<div class="ui left pointing label" style="display:none"> 已添加 </div>
	</div>

	<script id="noteTemplate" type="text/html">
		<div id="note-<%=t.id%>" style="margin-top: 20px">
			<div class="ui block top attached header" style="padding-left: 0.5rem; padding-right: 0.5rem">
				<div class="ui container" style="width: 100%">
					<div class="content" style="font-size: 18px; font-weight: 400; text-overflow: ellipsis; margin-left: 10px">
						<%=t.title%>
					</div>
					<div class="ui medium compact right floated icon buttons" style="position: relative; top: -6px;">
						<button class="ui button" onclick="$('#note-<%=t.id%>-form').slideToggle('fast')"><i class="pencil alternate icon"></i></button>
						<button class="ui button" onclick="if(confirm('确认删除 <%=t.title%>?')){DeleteNote(<%=t.id%>)}	"><i class="trash alternate icon"></i></button>
					</div>
				</div>
			</div>
			<div class="ui bottom attached segment" style="margin-bottom: 2px;">
				<div class="content"> <%=t.description%> </div>
				<div class="content" style="margin-top: 4px; font-size: 16px"> <%=t.content%> </div>
			</div>
			<div id="note-<%=t.id%>-form" class="ui segment form" style="margin-top: 2px; display: none">
				<h3> 编辑 </h3>
				<input type="text" name="id" value="<%=t.id%>" style="display: none" />
				<div class="ui grid">
					<div class="ui fourteen wide column">
						<div class="ui labeled fluid input">
							<div class="ui label"> 标题 </div>
							<input type="text" name="title" value="<%=t.title%>" />
						</div>
					</div>
					<div class="ui two wide column" style="padding-left: 0px; ">
						<div class="ui fluid input">
							<input type="text" name="priority" placeholder="重要度" value="<%=t.priority%>" />
						</div>
					</div>
				</div>
				<div class="ui labeled fluid input" style="margin-top: 4px">
					<div class="ui label"> 描述 </div>
					<input type="text" name="description" value="<%=t.description%>" >
				</div>
				<div class="field" style="margin-top: 6px;">
					<label> 内容 </label>
					<textarea rows="10" name="content"><%=t.content%></textarea>
				</div>
				<button id="note-<%=t.id%>-submit-button" onclick="SubmitNote(<%=t.id%>)" class="ui blue labeled icon button"> <i class="save icon"></i> 保存 </button>
				<div class="ui left pointing label" style="display:none"> 已保存 </div>
			</div>
		</div>
	</script>
	<div id="notes-container">
	</div>

	<script> InitNotes() </script>
</div>

		</div>
	</div>
	<script> RenderSemanticUI() </script>
</body>
</html>